<template>


	<view class="">
		<view class="gl-header">
			<view class="gl-header-left">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="getSearch"></uni-search-bar>
				<checkbox-group @change="argsChange">
					<label>
						<checkbox value="small" :checked="showSmall" style="transform:scale(0.7)" />不显示游客
					</label>
				</checkbox-group>
			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-error" hover-class="button-base-hover" :hover-stay-time="100"
					@click="eventGivCard">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">批量补券</text>
				</view>
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
			</view>
		</view>

		<view class="gl-body table-container" :style="{height:swiperH+'px'}">
			<uni-table stripe type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>昵称</uni-th>
					<uni-th>姓名</uni-th>
					<uni-th width="50">性别</uni-th>
					<uni-th width="160">身份证</uni-th>
					<uni-th width="80">手机号</uni-th>
					<uni-th width="160">创建时间</uni-th>
					<uni-th>启用状态</uni-th>
					<uni-th>权益</uni-th>
					<uni-th>卡券</uni-th>
					<uni-th>推荐</uni-th>
					<uni-th>操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tmpData" :key="index">
					<uni-td>{{item.id}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;" @click="eventStaffInfo(item.id)">
							<image :src="sConf.cos + item.face" mode="scaleToFill"
								style="width: 40px;height: 40px;border-radius: 50% 50%;"></image>
							<text>{{item.nicename}}</text>
						</view>
					</uni-td>
					<uni-td>{{item.basename}}</uni-td>
					<uni-td width="50">{{item.gender?'男':'女'}}</uni-td>
					<uni-td width="160">{{zipStr(item.idcode) ?? 'none'}}</uni-td>
					<uni-td width="80">{{zipStr(item.phone) ?? 'none'}}</uni-td>

					<uni-td width="160">{{item.created}}</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.status)" @change="status_good(item);"
							:disabled="item.id === sConf.auth.attrs.id" style="transform:scale(0.7)" />
					</uni-td>
					<uni-td>
						<view class="gl-link gl-link-warning">
							{{item.sub_curlevel.name}}
						</view>
					</uni-td>
					<uni-td>{{calcCard(item.sub_cards)}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;" @click="eventStaffInfo(item.sub_parent.id)">
							<image :src="sConf.cos + item.sub_parent.face" mode="scaleToFill"
								style="width: 40px;height: 40px;border-radius: 50% 50%;"></image>
							<text>{{item.sub_parent.nicename}}</text>
						</view>
					</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;">
							<view class="gl-link gl-link-base" @click="eventStaffInfo(item.id)">查看</view>
							<!-- view class="gl-link gl-link-warning" @click="levelChange(item)">权益</view-->
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

		</view>

		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="hasTmpData" />
		</view>

		<!-- popup模态窗口 -->
		<popupStaffLevelVue ref="popupLevel" @reload="refresh"></popupStaffLevelVue>
		<popStaffInfoVue ref="popStaffInfo" @reload="refresh"></popStaffInfoVue>
	</view>

</template>

<script>
	import utils from '@/common/utils.js'
	import psMethod from '@/common/psMethod';
	import popupStaffLevelVue from './popup-staff-level.vue';
	import popStaffInfoVue from './pop-staff-info.vue';
	export default {
		name: "sub-staff-list",
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				search: '',
				tmpData: null,
				showSmall: true, // 不显示游客
			};
		},
		mounted() {
			console.log('mounted sub-staff-list');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.refresh();
		},
		components: {
			popupStaffLevelVue,
			popStaffInfoVue
		},
		methods: {
			calcCard(e) {
				if (!Boolean(e)) {
					return '0/0'
				}
				let usable = 0
				e.forEach(item => {
					if (item.status === 1) {
						usable++
					}
				})
				return usable + '/' + e.length
			},
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			argsChange(e) {
				console.log('argsChange', e.detail.value);
				this.showSmall = e.detail.value.includes("small") ? true : false
			},
			eventStaffInfo(e) {
				console.log('eventStaffInfo', e);
				this.$refs.popStaffInfo.open(e)
			},
			logout() {
				this.$emit('logout');
			},
			refresh() {
				console.log('refresh');
				this.hasTmpData();
			},
			getSearch(e) {
				console.log('getSearch', e.value, this.search);
				this.hasTmpData();
			},
			hasTmpData() {
				console.log('拉取数据');
				let host = this.sConf.host + '/admin/staff/'
				let token = this.sConf.auth.token
				let data = {
					'page': this.page,
					'size': this.size
				};
				if (this.showSmall) {
					data['small'] = 1
				}
				if (this.search) {
					console.log('search', this.search);
					data['search'] = this.search
				}
				psMethod.authenticatorGetSync(host, token, data).then((res) => {
					console.log('请求成功', res);
					this.tmpData = res.resmsg;
					this.count = res.count;
					this.size = res.size;
				});

				// utils.adminGetStaffList(this.sConf.host, this.sConf.auth.token, data).then((res) => {
				// 	console.log('请求成功', res);
				// 	if (res.rescode === 401) {
				// 		this.logout();
				// 	}
				// 	if (res.rescode === 200) {
				// 		this.tmpData = res.resmsg;
				// 		this.count = res.count;
				// 		this.size = res.size;
				// 	}
				// });
			},
			status_good(e) {
				console.log('修改状态', e);
				let data = {
					'status': e.status ? 0 : 1
				}
				utils.adminPatchStaffList(this.sConf.host, this.sConf.auth.token, data, e.id).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {}
				});
			},
			zipStr(e) {
				if (e === null) {
					return 'none'
				}
				let symbol = '*';
				if (e.length === 11) {
					return e.replace(/(\d{3})\d{4}(\d{2})/, `$1${symbol}${symbol}${symbol}${symbol}$2`)
				} else if (e.length === 18 || e.length === 15) {
					return e.replace(/(\d{12}).*/, `$1${symbol}${symbol}${symbol}${symbol}`)
				} else {
					return e;
				}
			},
			/**
			 * 编辑权益
			 * @param {Object} e
			 */
			levelChange(e) {
				console.log('levelChange', e);
				this.$refs.popupLevel.open(e)
			},
			/**
			 * 批量补券
			 */
			eventGivCard() {
				let that = this
				uni.showModal({
					title: '身份认证',
					placeholderText: '请验证二次密码',
					editable: true,
					success(r) {
						if (r.confirm && r.content === '253100') {
							let host = that.sConf.host + '/admin/coupon/'
							let token = that.sConf.auth.token || '';
							let data = {}
							psMethod.authenticatorPostSync(host, token, data).then(res => {
								console.log('批量发券', res);
								uni.showToast({
									title: '创建任务成功'
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;
	
		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}
	
		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>